<template>
  <div>
    <el-tooltip class="item" effect="dark" :content="getTips()" placement="top-start">
      <i :class="getClass()" @click.stop="switchLanguage()"></i>
    </el-tooltip>
  </div>
</template>
<script>
import { AppModule } from '@/store/modules/app'

export default {
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    getTips() {
      if (this.language === 'zh') {
        return this._('Switch to English')
      }
      if (this.language === 'en') {
        return this._('切换到中文')
      }
      return this._('Click to switch language')
    },
    getClass() {
      if (this.language === 'zh') return 'iconfont icon-yingwenqiehuan'
      if (this.language === 'en') return 'iconfont icon-zhongwenqiehuan'
      return 'iconfont icon-yuyanfanyi'
    },
    switchLanguage() {
      let lang = 'zh'
      if (this.language === 'zh') {
        lang = 'en'
      }
      if (this.language === 'en') {
        lang = 'zh'
      }

      this.$i18n.locale = lang
      AppModule.SetLanguage(lang)
      location.reload()
      // this.$message({
      //   message: this._('Successfully switched language.'),
      //   type: 'success'
      // })
    }
  }
}
</script>
<style scoped>
.iconfont {
  font-size: 20px;
  cursor: pointer;
  vertical-align: -4px !important;
  /* line-height:50px; */
}

.el-dropdown-selfdefine {
  height: 50px;
}
</style>
